import { useRequest, history } from 'umi';
import { Row, Col, Spin, message, Button, Space } from 'antd';
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import { TypographyTitle } from '@/components/Typography';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { ThemeList } from './components';
import { useThemeData } from './hooks';
import { isThemeDefault, isThemeOpen } from './service';
import cls from 'classnames';
import './styles.less';
import { getCompanyID, getKeyRouter, getPosIDs, getUserDepID, getUserID } from '@/utils';

const Index = () => {
  const { data, loading, run, reloadRefresh } = useThemeData();

  const onSuccess = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
    } else {
      message.error(res?.msg);
    }
    run();
  };

  const defaultRequest = useRequest(
    (id: any, versionNum: any, isOpen: any) => {
      return isThemeDefault({
        id,
        isDefault: 1,
        versionNum,
        isOpen,
        modifyCompanyID: getCompanyID(),
        modifyDepartmentID: getUserDepID(),
        modifyPositionID: getPosIDs(),
        modifyerID: getUserID(),
      });
    },
    {
      manual: true,
      onSuccess: onSuccess,
    },
  );

  /* 点击禁用 */
  const openRequest = useRequest(
    (isOpen, id: any, versionNum: any) => {
      return isThemeOpen({
        id,
        isOpen,
        versionNum,
        modifyCompanyID: getCompanyID(),
        modifyDepartmentID: getUserDepID(),
        modifyPositionID: getPosIDs(),
        modifyerID: getUserID(),
      });
    },
    {
      manual: true,
      onSuccess: onSuccess,
    },
  );

  /* 点击方法 */
  const actionClick = (() => ({
    onDefault: (id: string, versionNum: any) => {
      const isOpen = data?.obj?.find((i: any) => i?.id == id)?.isOpen;
      defaultRequest?.run(id, versionNum, isOpen);
    },
    onOpen: (isOpen: any, id: string, versionNum: any) => {
      openRequest?.run(isOpen, id, versionNum);
    },
    onThemeEdit: (id: string) => {

      if (id) {
        history.push({
          pathname: `/themeStyleController/edit/:${getKeyRouter()}${getKeyRouter()}`,
          state: {
            id,
          },
        });
      }
    },
  }))();

  const onAppend = () => {
    history.push('/themeStyleController/add');
  };

  return (
    <div className={cls('theme-list-layout')}>
      <Spin spinning={loading}>
        <div className={cls('theme-list-title')}>
          <TypographyTitle style={{ margin: 0 }}>主题管理</TypographyTitle>
          <Space>
            <Button
              type={'primary'}
              icon={<PlusOutlined />}
              size={'small'}
              onClick={onAppend}
            >
              新增主题
            </Button>
            <Button
              type={'primary'}
              icon={<ReloadOutlined />}
              size={'small'}
              onClick={() => {
                reloadRefresh();
              }}
            >
              刷新
            </Button>
          </Space>

        </div>
        <div className={cls('theme-list-content')}>
          <ScrollBarLayout style={{ paddingRight: '.5rem' }}>
            <Row gutter={[16, 24]}>
              {data?.obj?.map((item: any) => {
                return (
                  <Col span={6} key={item?.id}>
                    <ThemeList themeStyle={item} key={item?.id} actionClick={actionClick} />
                  </Col>
                );
              })}
            </Row>
          </ScrollBarLayout>
        </div>
      </Spin>
    </div>
  );
};

export default Index;
